<extend name="public/form"/>
<block name="css"></block>
<block name="content">
    <div class="layui-card-header ">
        <span class="layui-breadcrumb">{{$crumbs|raw}}</span>
        <a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right"
           href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon" style="line-height:30px">ဂ</i>
        </a>
    </div>
    <div class="layui-card-body layui-tab"><!--选项卡父容器必须包含layui-tab class-->
        <ul class="layui-tab-title">
            <li class="layui-this">网站信息</li>
            <li>文件上传</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <form id="site" class="layui-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">网站名称</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="type" value="site">
                            <input type="text" name="title" lay-verify="required" jq-error="请输入网站名称"
                                   placeholder="请输入网站名称" autocomplete="off" class="layui-input "
                                   value="{{$site.title}}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">网站LOGO</label>
                        <div class="layui-input-block">
                            <input type="text" name="logo" lay-verify="required" jq-error="请输入网站名称"
                                   placeholder="请输入网站LOGO" autocomplete="off" class="layui-input " style="width: 70%;display: inline-block"
                                   value="{{$site.logo}}">
                            <button type="button" class="layui-btn" id="upload-logo">上传图片</button>
                            <!--button下面接div方便回显设置图片-->
                            <div class="layui-upload">
                                <div class="layui-upload-list" >
                                    <img class="layui-upload-img" id="show-logo" style="height: 75px;" src="{{$site.logo}}">
                                    <p id="text-logo"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">网站关键字</label>
                        <div class="layui-input-block">
                            <input type="text" name="keywords" lay-verify="required" jq-error="请输入网站名称"
                                   placeholder="请输入网站关键字" autocomplete="off" class="layui-input "
                                   value="{{$site.desc}}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">站长</label>
                        <div class="layui-input-block">
                            <input type="text" name="person" lay-verify="required" placeholder="请输入站长名称"
                                   autocomplete="off" class="layui-input "
                                   value="{{$site.person}}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">网站邮箱</label>
                        <div class="layui-input-block">
                            <input type="text" name="email" lay-verify="required|email" jq-error="请输入网站邮箱"
                                   placeholder="请输入网站邮箱" autocomplete="off" class="layui-input "
                                   value="{{$site.email}}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">备案号</label>
                        <div class="layui-input-block">
                            <input type="text" name="record_no" jq-error="请输入备案号"
                                   placeholder="请输入备案号" autocomplete="off" class="layui-input "
                                   value="{{$site.record_no}}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">公安备案</label>
                        <div class="layui-input-block">
                            <input type="text" name="record_no2" jq-error="请输入公安备案号"
                                   placeholder="请输入备案号" autocomplete="off" class="layui-input "
                                   value="{{$site.record_no2}}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">网站描述</label>
                        <div class="layui-input-block">
                            <textarea name="desc" lay-verify="required" jq-error="请输入网站名称"
                                      placeholder="请输入网站描述" autocomplete="off"
                                      class="layui-textarea ">{{$site.desc}}</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit="" lay-filter="site">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item">
                <form id="up" class="layui-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">图片格式</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="type" value="up">
                            <input type="text" name="image_ext" lay-verify="required" jq-error="请输入图片格式"
                                   placeholder="请输入图片格式" autocomplete="off" class="layui-input "
                                   value="{{$up.image_ext}}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">图片最大值</label>
                        <div class="layui-input-block">
                            <input type="text" name="image_size" lay-verify="required" jq-error="请输入图片最大值"
                                   placeholder="请输入图片最大值" autocomplete="off" class="layui-input " value="{{$up.image_size}}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">压缩图片</label>
                        <div class="layui-input-block">
                            <input type="radio" name="image_zip_status" value="1" title="启用" {{$up.image_zip_status?'checked':''}}>
                            <input type="radio" name="image_zip_status" value="0" title="关闭" {{$up.image_zip_status?'':'checked'}}>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">保留原图</label>
                        <div class="layui-input-block">
                            <input type="radio" name="image_original_status" value="1" title="保留" {{$up.image_original_status?'checked':''}}>
                            <input type="radio" name="image_original_status" value="0" title="不保留原图" {{$up.image_original_status?'':'checked'}}>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">图片质量</label>
                        <div class="layui-input-block">
                            <input type="text" name="image_zip_quality" lay-verify="required" jq-error="请输入图片质量"
                                   placeholder="请输入图片质量" autocomplete="off" class="layui-input " value="{{$up.image_zip_quality}}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">图片宽</label>
                        <div class="layui-input-block">
                            <input type="text" name="image_zip_width" lay-verify="required" jq-error="请输入图片宽度"
                                   placeholder="请输入图片大小" autocomplete="off" class="layui-input " value="{{$up.image_zip_width}}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">图片高</label>
                        <div class="layui-input-block">
                            <input type="text" name="image_zip_height" lay-verify="required" jq-error="请输入图片宽度"
                                   placeholder="请输入图片大小" autocomplete="off" class="layui-input " value="{{$up.image_zip_height}}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">水印状态</label>
                        <div class="layui-input-block">
                            <input type="radio" name="watermark_status" value="1" title="开启" {{$up.watermark_status?'checked':''}}>
                            <input type="radio" name="watermark_status" value="0" title="关闭" {{$up.watermark_status?'':'checked'}}>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">水印图片</label>
                        <div class="layui-input-block">
                            <input type="text" name="watermark_url" lay-verify="required" jq-error="请输入水印图片"
                                   placeholder="请上传水印图" autocomplete="off" class="layui-input " style="width: 70%;display: inline-block"
                                   value="{{$up.watermark_url}}">
                            <button type="button" class="layui-btn" id="upload-watermark">上传水印图片</button>
                            <div class="layui-upload-list" >
                                <img class="layui-upload-img" style="height: 75px;" id="show-watermark" src="{{$up.watermark_url}}">
                                <p id="text-watermark"></p>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit="" lay-filter="up">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</block>
<block name="js">
    <script>
        layui.use(['jquery', 'form', 'layer', 'upload'], function () {
            var $ = layui.jquery,
                form = layui.form,
                upload = layui.upload,
                layer = layui.layer;
            form.render();
            //监听修改基本网站基本信息提交
            form.on('submit()', function (data) {
                let send_json = data.field;
                let url = '/admin/configs/edit';
                $.ajax({
                    url: url,
                    method: 'post',
                    data: send_json,
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.code == 0) {
                            layer.alert("编辑成功", {
                                icon: 6
                            });
                        } else {
                            layer.msg(res.msg, {icon: 5});
                        }
                    },
                    error: function (data) {
                        layer.msg('服务器繁忙', {icon: 5});
                    }
                });
                return false;
            });
            // //监听修改文件上传基本信息修改提交
            // form.on('submit(up)', function (data) {
            //     let send_json = data.field;
            //     let url = '/admin/configs/edit';
            //     $.ajax({
            //         url: url,
            //         method: 'post',
            //         data: send_json,
            //         dataType: 'JSON',
            //         success: function (res) {
            //             if (res.code == 0) {
            //                 layer.alert("编辑成功", {
            //                     icon: 6
            //                 });
            //             } else {
            //                 layer.msg(res.msg, {icon: 5});
            //             }
            //         },
            //         error: function (data) {
            //             layer.msg('服务器繁忙', {icon: 5});
            //         }
            //     });
            //     return false;
            // });
            //上传网站logo
            let uploadInst = upload.render({
                elem: '#upload-logo'
                , url: '/admin/uploads/img?dir=site_logo'
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#show-logo').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg(res.msg);
                    }
                    layer.msg('上传成功！');
                    $('#upload-logo').prev().val(res.data.url);
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#text-logo');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
            //上传图片水印
            let upload_watermark = upload.render({
                elem: '#upload-watermark'
                , url: '/admin/uploads/img?dir=watermark'
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#show-watermark').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg(res.msg);
                    }
                    layer.msg('上传成功！');
                    $('#upload-watermark').prev().val(res.data.url);
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#text-watermark');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs watermark-reload">重试</a>');
                    demoText.find('.watermark-reload').on('click', function () {
                        upload_watermark.upload();
                    });
                }
            });
        });
    </script>
</block>